<template>
  <div id="detail">
    <detail-nav-bar class="detailNavBar" ref="detailNavBar" @tooleClick="tooleClick" :shopping="data.DetailParamInfo ? ['商品','参数','评论','推荐'] : ['商品','评论','推荐']"></detail-nav-bar>
    <better-scroll
      class="contentDetail"
      ref="betScroll"
      :click="true"
      :probe-type="3"
      :listen-scroll="true"
      @scroll="scroll"
    >
      <detail-swiper ref="detailSwiper" :swiperData="data.swiper"></detail-swiper>
      <detail-base-info :detail-base-infos="data.BaseInfo"></detail-base-info>
      <detail-shopper :shopper-info="data.shopperInfo"></detail-shopper>
      <detail-goods-info :good-lists="data.goodList" @goodLoad="goodLoads"></detail-goods-info>
      <detail-param-info ref="detailParamInfo" :detail-param-infos="data.DetailParamInfo"></detail-param-info>
      <comment-list-item ref="commentListItem" :commentRates="data.commentRate"></comment-list-item>
      <detail-recommend-view ref="detailRecommendView" class="detailView"></detail-recommend-view>
    </better-scroll>

    <back-top @backTopEmit="backTopEmit" v-show="showBackTop"></back-top>
    <detail-bottom-bar class="bottomBars"></detail-bottom-bar>
  </div>
</template>

<script>
  import DetailNavBar from "views/detail/children/DetailNavBar";
  import DetailSwiper from "views/detail/children/DetailSwiper";
  import DetailBaseInfo from "views/detail/children/DetailBaseInfo";
  import DetailShopper from "views/detail/children/DetailShopper";
  import DetailGoodsInfo from "views/detail/children/DetailGoodsInfo";
  import DetailParamInfo from "views/detail/children/DetailParamInfo";
  import DetailRecommendView from "views/detail/children/DetailRecommendView";
  import BetterScroll from "components/common/betterScroll/BetterScroll";
  import CommentListItem from "components/content/comment/CommentListItem";
  import DetailBottomBar from "views/detail/children/DetailBottomBar";
  import BackTop from "components/content/backTop/BackTop";

  import {getDetail,getDetailInfo,getShopperInfo,getDetailListImg,getComment,getDetailParamInfo,getShopperXinXi,getDetailShopper} from "network/detail";
  import {Debounce,debounce} from "common/util";
  import {backTopMixin} from "common/mixin";

  export default {
    name: "Detail",
    components: {
      DetailNavBar,
      DetailSwiper,
      DetailBaseInfo,
      DetailShopper,
      DetailGoodsInfo,
      getShopperInfo,
      DetailParamInfo,
      BetterScroll,
      CommentListItem,
      DetailRecommendView,
      DetailBottomBar,
      BackTop
    },
    mixins: [backTopMixin],
    data(){
      return {
        data: {
          swiper: null,
          BaseInfo: null,
          shopperInfo: null,
          goodList: null,
          commentRate: null,
          DetailParamInfo: null,
          DetailShopper: null
        },
        themeTopYs: [],
        getThemeTopY: null,
        currentIndex: 0,
        isTrigger: true,
        result: {}
      };
    },
    computed: {
      /**
       * 数据分类
       */
      getDetailSynthesize: {
        set: function(data){
          this.result = data; //传入全部数据
          this.data.swiper = data.itemInfo.topImages;
          this.data.BaseInfo = new getDetailInfo(data.itemInfo, data.columns, data.shopInfo.services);
          this.data.shopperInfo = new getShopperInfo(data.shopInfo);
          this.data.goodList = new getDetailListImg(data.detailInfo);
          this.data.commentRate = new getComment(data.rate.list);
          this.data.DetailParamInfo = new getDetailParamInfo(data.itemParams);
        },
        get: function () {}
      }
    },
    methods: {
      backTopEmit(){
        this.backTop(0,0,2000);
      },
      scroll(pos){
        this.showBackTop = -(pos.y) >= 1000;
        if (this.isTrigger){
          for (let i = 0;i <= this.themeTopYs.length - 1;i++){
            if ((-pos.y >= this.themeTopYs[i] && (this.themeTopYs[i+1] !== undefined ? -pos.y <= this.themeTopYs[i+1] : this.themeTopYs[i]))){
              this.currentIndex = i;
              this.$refs.detailNavBar.currentIndex= this.currentIndex;
            }
          }
        }
      },
      /**
       * 回到顶部
       */
      tooleClick(index){
        this.$refs.betScroll.scrollTo(0,(-this.themeTopYs[index]),2000);
      },
      /**
       * 获取距离顶部的高度
       */
      distancesTop(){
        this.getThemeTopY = Debounce(() => {
          this.themeTopYs = [];
          let offsetHeight = this.$refs.detailNavBar.$el.offsetHeight;
          let swiperTop = this.$refs.detailSwiper.$el.offsetTop;
          let top = swiperTop !== 0 ? offsetHeight : 0;
          this.themeTopYs.push(0);
          this.data.DetailParamInfo ? this.themeTopYs.push((this.$refs.detailParamInfo.$el.offsetTop - top)) : false;
          this.themeTopYs.push((this.$refs.commentListItem.$el.offsetTop - top));
          this.themeTopYs.push((this.$refs.detailRecommendView.$el.offsetTop - top));
        },50);
      },
      /**
       * 发送请求,获取Detail全部数据
       */
      getDetailAll(){
        let id = this.$route.params.id;

        getDetail(id)
          .then(res => {
            this.getDetailSynthesize = res.data.result;
          })
          .catch(err => {
            console.log(err + "错误处理");
          });
      },
      goodLoads(){
        var debounces = Debounce(this.$refs.betScroll.refresh,50);

        debounces();
        this.getThemeTopY();
      },
      shopperInformation(){
        getShopperXinXi()
          .then(res => {
            this.$store.commit('setDetailShopper', new getDetailShopper(res.data.data.list));
          })
          .catch(err => {
            console.log(err + '错误处理!');
          });
      },
      /**
       * 重新计算高度值
       */
      debouncesBus(){
        var debounces = Debounce(this.$refs.betScroll.refresh,50);

        this.$bus.$on("scrollLoadImgsDetail",() => {
          debounces();
        });
      }
    },
    created() {
      this.getDetailAll();
      this.shopperInformation();
    },
    mounted() {
      this.debouncesBus();
      this.$nextTick(() => {
        this.distancesTop();
      })
    }
  }
</script>

<style scoped>
  #detail{
    height: 100vh;
    position: relative;
    z-index: 999;
    background-color: #F6F6F6;
  }
  .contentDetail{
    height: calc(100% - 98px);
    overflow: hidden;
  }
  .detailNavBar{
    position: relative;
    z-index: 999;
    background-color: white;
  }
  .detailView{
    margin-top: 5px;
  }
  .bottomBars{
    position: relative;
  }
</style>